import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
// 引入组件配置文件
import classNames from 'classnames'
import './animate.css'
import './style.less'


const Panel = (props) => {
  const { property, boderDebugger } = props;
  return (<>



     {/* <transition
        name="custom-classes-transition"
        enter-active-class="animated zoomIn"
        leave-active-class="animated zoomOut"
      > */}
      <div

        className={classNames(
          'grid-item',
          'grid-x-'+property.attrs.col,
          'grid-y-'+property.attrs.row,
          'grid-w-'+property.attrs.width,
          'grid-h-'+property.attrs.height,
          'grid_padding'
        )}
        style={{'zIndex':property.attrs.zIndex, border: '1px solid red'}}>
        <div className="sti-panel"
          style={property.panelStyle}
          className={classNames({'boder-debugger': boderDebugger})}
          >
          <div className="sti-panel_inner">
            <div className="sti-panel_body">
               {/* 渲染组件 */}
                < property.component></property.component>
            </div>
          </div>
        </div>
      </div>
  {/* </transition> */}
  </>)
}

Panel.propTypes = {
  property: PropTypes.object,
  boderDebugger: PropTypes.bool
  // dataValue: PropTypes.object
};

Panel.defaultProps = {
  boderDebugger:false
}



export default Panel;


{/* <template>

</template>
<script>

export default {
  components: {},
  props: {
    property: {
      type: Object,
      default: {}
    },
    dataValue: {
      defautl: null
    },
    boderDebugger: {
      type: Boolean,
      defautl: false
    }
  },
  data() {
    return {
      currentComp: this.property.component,
      pValue: {
        'pCfg': this.property
      },

    }
  },
  methods: {
  },
  watch: {
    property(v) {
      if (v) {
        this.currentComp = v.component
        this.pValue.pCfg = v
      }
    }
  },
  computed: {
    comp() {
      if (this.currentComp) {
        return require('../' + this.currentComp + '/index.vue').default
      }
    }
  },
  created() {},
  mounted() {}
}
</script> */}
